<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的消费卷</title>
  <link rel="stylesheet" href="./static/css/reset.css">
  <link rel="stylesheet" href="./static/css/my_quan.css">
  <script src="./static/js/jquery.min.js"></script>
  <script src="./static/js/rem.js"></script>
  <script>
    $(function(){
      $('.top-nav>div').on('click',function(){
        var index = $(this).index();
        $(this).addClass('active').siblings('div').removeClass('active');
        if(index == 0){
          $('.unused-quan-warp').removeClass('hide').siblings('div').addClass('hide');
        }else if(index == 1){
          $('.used-quan-warp').removeClass('hide').siblings('div').addClass('hide');
        }else{
          $('.expired-quan-warp').removeClass('hide').siblings('div').addClass('hide');
        }
      })
    })
  </script>
</head>
<body>
  <!-- 头部导航 -->
  <nav class="top-nav">
    <div class="active">未使用</div>
    <div>已经使用</div>
    <div>已过期</div>
  </nav>

  <!-- 未使用消费卷 -->
  <div class="unused-quan-warp">
    <div class="quan-inner">
      <div class="quan-box a-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box b-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box c-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box d-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
  </div>

  <!-- 已使用消费卷 -->
  <div class="used-quan-warp hide">
    <div class="quan-inner">
      <div class="quan-box a-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box b-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box c-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box d-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
  </div>

  <!-- 已过期消费卷 -->
  <div class="expired-quan-warp hide">
    <div class="quan-inner">
      <div class="quan-box a-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box b-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box c-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
    <div class="quan-inner">
      <div class="quan-box d-quan-box">
        <div class="date">有效期：2019.12.11 - 2019.12.21</div>
      </div>
    </div>
  </div>
</body>
</html>